<template>
  <div class="login_container">
    <!-- 登录页面 -->
    <div class="login_box">
      <div class="wellcome">
        <span>欢迎登录</span>
      </div>
      <div class="login_form">
        <!-- 不带*号 -->
        <!-- <el-form ref="form" :model="form" label-width="60px">
          <el-form-item label="用户名">
            <el-input type="text" v-model="form.username" size="small"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="form.password" size="small"></el-input>
          </el-form-item>
        </el-form> -->

        <!-- 带*号 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <!-- <span slot="label" class="slot_form_label">用户名</span> -->
            <el-input
              type="text"
              clearable
              v-model="ruleForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <!-- <span slot="label" class="slot_form_label">密码</span> -->
            <el-input
              type="password"
              clearable
              v-model="ruleForm.password"
            ></el-input>
          </el-form-item>

          <div style="display: flex">
            <el-input
              type="text"
              v-model="inputCode"
              placeholder="请输入验证码"
              clearable
            ></el-input>
            <span @click="createCode"
              ><SIdentify :identifyCode="code"></SIdentify
            ></span>
          </div>
        </el-form>

          <div class="login_btn">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <!-- <el-button type="primary" @click="test"
              >测试跨域</el-button
            > -->
          </div>
        <div class="forget_box">
          <span class="forget_psw">忘记密码</span>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import SIdentify from "../../components/SIdentify.vue";
import {
  getUserList,
  addUser,
  delUser
  } from "../../api/user";
export default {
  name: "",
  components: {
    SIdentify, //生成验证码
  },
  data() {
    return {
      // form: {
      //   username: "",
      //   password: "",
      // },
      //验证码
      code: "",
      inputCode: "",
      passCode:false,
      //表单验证
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.createCode();
    this.keyupSubmit();
  },
  methods: {
    //回车进行登录
    keyupSubmit() {
      document.onkeydown = (e) => {
        let _key = window.event.keyCode;
        if (_key === 13 && !this.clickState) {
          this.submitForm('ruleForm');
        }
      };
    },
    //表单验证
    submitForm(formName) {
      // console.log(this.inputCode.toLowerCase());
      // console.log(this.code.toLowerCase());
      // if (
      //   this.inputCode == "" ||
      //   this.inputCode.toLowerCase() != this.code.toLowerCase()
      // ) {
      //   this.$message.error("验证码输入错误");
      //   this.createCode()
      //   // return;
      // } else {
      //   this.passCode = true
      // }
      // this.$refs[formName].validate((valid) => {
      //   if (valid && this.passCode) {
      //     // alert("submit!");
      //      this.$router.push(`/home`)
      //   } else {
      //     console.log("error submit!!");
      //     this.passCode = false
      //     return false;
      //   }
      // });
      this.$router.push(`/home`)
    },
    //生成登录验证码
    createCode() {
      var text = "";
      var possible =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      // 设置验证码长度，
      for (var i = 0; i < 4; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      this.code = text;
    },
    test() {
      
    }
  },
};
</script>

<style lang="less" scoped>
.login_container {
  position: relative;
  height: 100%;
  // width: 100%;
  background-image: url("~@/assets/login/login.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.login_box {
  width: 30%;
  height: 50%;
  // border: 1px solid red;
  min-width: 350px;
  border-radius: 10px;
  position: absolute;
  left: 45%;
  top: 50%;
  transform: translate(-50%, -50%);
  // background-color: #FEDBCF;
  background-color: rgba(0, 0, 0, 0.1); /*透明的背景颜色*/
  .wellcome {
    display: flex;
    align-items: center; //竖
    justify-content: center; //横
    height: 20%;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    -moz-user-select:none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    > span {
      font-weight: 600;
      font-size: 36px;
    }
  }
  .login_form {
    width: 70%;
    // height: 200px;
    position: absolute;
    margin-top: 30px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.login_btn {
  margin-top: 10px;
  text-align: center;
}
.forget_box {
  float: right;
  .forget_psw {
    cursor: pointer;
    text-decoration: underline;
    -moz-user-select:none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

//两端对齐不带*号
// ::v-deep .el-form-item__label {
//   text-align: justify;
//   text-align-last: justify;
//   padding: 0 20 0 0;
//   color: #333;
// }
// ::v-deep .el-form-item__label::after {
//   content: ": ";
//   position: absolute;
// }
//两端对齐 带*号
::v-deep .el-form-item__label {
  text-align: justify;
  text-align-last: justify;
  padding: 0 20 0 0;
  color: #333;
}
::v-deep .el-form-item__label::after {
  content: ": ";
  position: absolute;
}
::v-deep .el-form-item__label::before {
  display: none;
}
.slot_form_label::after {
  //带*号
  content: "*";
  width: 100%;
  display: inline-block;
  position: absolute;
  left: -10px;
  color: red;
}
</style>
